<!DOCTYPE html>
<html>
<head th:include="include :: header"></head>
<body>
<div class="layui-fluid layadmin-maillist-fluid">
    <div class="layui-row layui-col-space15" id="app" v-cloak>
        <div class="layui-col-md12" v-if="total=='0'">
            <div class="layadmin-homepage-panel">
                <div class="layui-card text-center">
                    <div class="layui-card-body">
                        暂无数据
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div v-if="total!='0'" v-for="(row,index) in rows" :id="row.id">
                <div class="layui-col-md3 layui-col-sm6" style="padding:7px;">
                    <div class="cmdlist-container" style="text-align:center;" v-on:click="showPicture(row)">
                        <a style="cursor:pointer;">
                            <img :src="row.url" style="width:auto;max-width:100%;height:160px;">
                        </a>
                        <a>
                            <div class="cmdlist-text" style="padding:10px 20px;">
                                <p style="text-align:center;padding-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{row.name}}</p>
                                <ul style="display:none;" :id="row.id+'_file'" v-html="row.imgHtml"></ul>
                            </div>
                        </a>
                    </div>
                </div>
                <div style="clear:both;" v-if="index==3 || index==7"></div>
            </div>
            <div style="clear:both;"></div>
            <div id="LAY-template-search-page" style="text-align:center;" v-show="total!='0'"></div>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript" th:src='@{/custom/vue.min.js}'></script>
<script th:inline="javascript">
    layui.config({
        base: ctx + '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        viewer: 'viewer'
    }).use(['index', 'viewer'], function () {
        var app = new Vue({
            el: '#app',
            data: {
                pageNumber: 1,
                pageSize: 12,
                total: 0,
                rows: '',
                viewer: ''
            },
            methods: {
                getData: function () {
                    commonJs.openAjax(ctx + "/manage/picture/picture/list", {
                        pageSize: this.pageSize,
                        pageNumber: this.pageNumber
                    }, function (r) {
                        if (r.data.length > 0) {
                            for (var i = 0; i < r.data.length; i++) {
                                r.data[i].imgHtml = '';
                                r.data[i].url = ctx + r.data[i].url;
                                var fileList = r.data[i].list || [];
                                for (var j = 0; j < fileList.length; j++) {
                                    var item = fileList[j];
                                    item.url = ctx + item.url;
                                }
                            }
                        }
                        app.total = r.count;
                        app.rows = r.data;
                        app.page();
                    }, null, true, 'get');
                },
                page: function () {
                    layui.use('laypage', function () {
                        layui.laypage.render({
                            elem: 'LAY-template-search-page',
                            count: app.total,
                            limit: app.pageSize,
                            curr: app.pageNumber,
                            jump: function (obj, first) {
                                if (!first) {
                                    app.pageNumber = obj.curr;
                                    app.getData();
                                }
                            }
                        });
                    });
                },
                showPicture(data) {
                    commonJs.openLoad();
                    var id = data.id;
                    var list = data.list;
                    var imgHtml = '';
                    for (var i = 0; i < list.length; i++) {
                        var item = list[i];
                        var url = item.url;
                        var name = item.name;
                        imgHtml += '<li><img src="' + url + '" alt="">' + name + '</li>';
                    }
                    data.imgHtml = imgHtml;
                    var viewer = new Viewer(document.getElementById(id), {
                        view: function () {
                            commonJs.closeLoad();
                        },
                        show: function () {
                            viewer.update();
                        },
                        hidden: function () {
                            //关闭后清空imgHtml
                            data.imgHtml = '';
                        }
                    });
                }
            },
            created: function () {
                this.getData();
            }
        });
    });
</script>
</body>
</html>